<template>
	<view class="register">
		<view>

			<!-- <image src="../../static/image/icon/about/17.png" class="back_icon mart_90" @click="comeback"></image> -->
			<!-- <image src="../../static/image/8.png" class="back_icon mart_90" @click="comeback"></image> -->
			<common-navbar title="用户注册" />
			<view class="register_message">注册小律懂法</view>
		</view>

		<view>
			<view class="register_line">
				<view class="register_label">手机号</view>
				<view class="register_inp">
					<input type="number" v-model="phone" placeholder="请输入手机号码"
						placeholder-style="color: #e1e1e1; fontSize: 32rpx;" class="width padlr_20" />
				</view>
			</view>

			<view class="register_line">
				<view class="register_label">验证码</view>
				<view class="register_inp">
					<input type="number" maxlength="6" v-model="code" placeholder="请输入收到的验证码"
						placeholder-style="color: #e1e1e1; fontSize: 32rpx;" class="inputs" />
					<text @click="getCode" class="tips"
						:style="{color: isGetCodeButtonDisabled ? '#0078fb' : '#6e6e73'}">{{tips}}</text>
				</view>
			</view>

			<view class="register_line" v-if="shareCode">
				<view class="register_label">邀请码</view>
				<view class="register_inp">
					<input :disabled="true" v-model="shareCode" placeholder="邀请码"
						placeholder-style="color: #e1e1e1; fontSize: 32rpx;" class="width padlr_20" />
				</view>
			</view>

			<view class="register_line">
				<view class="register_label">密码</view>
				<view class="register_inp">
					<input type="password" v-model="password" placeholder="请输入密码"
						placeholder-style="color: #e1e1e1; fontSize: 32rpx;" class="width padlr_20" />
				</view>
			</view>

			<view class="register_line">
				<view class="register_label">确认密码</view>
				<view class="register_inp">
					<input type="password" v-model="confirmPassword" placeholder="再次输入密码"
						placeholder-style="color: #e1e1e1; fontSize: 32rpx;" class="width padlr_20" />
				</view>
			</view>
		</view>

		<view style="margin-top: 180upx;">
			<view>
				<u-button :custom-style="customStyle" shape="circle" @click="verificationInfo" throttle-time='1000'>注册
				</u-button>
				<view class="pass_register" @click="$u.throttle(jumpLogin, 1000)">有账户去登录</view>
			</view>
		</view>

		<view class="mart_30">
			<u-checkbox-group :wrap="true">
				<u-checkbox v-model="isAgreeService" :label-disabled="true" size='40'>
					<view class="size_24" :class="flag ? 'animate' : ''">
						登录即代表同意<text class="fb7" @click="toagreeandservices(1)">《用户服务协议》</text>和<text class="fb7"
							@click="toagreeandservices(2)">《用户隐私政策》</text>
					</view>
				</u-checkbox>
			</u-checkbox-group>
		</view>

		<u-toast ref="uToast"></u-toast>

		<u-verification-code :seconds="seconds" @start="codeCountDownstart" ref="registerCode" @change="codeChange"
			keep-running unique-key="registerCode">
		</u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '', //手机号
				code: '', //验证码
				password: '', //密码
				confirmPassword: '', //确认密码
				tips: '获取验证码', //获取验证码提示
				seconds: 60, //验证码秒数
				customStyle: { //按钮自定义样式
					color: '#ffffff',
					background: '#0078fb',
					fontSize: '32rpx',
					padding: '45rpx 0'
				},
				isAgreeService: false, //确认条款按钮标识
				flag: false, //不知道是啥,
				// shareCode: '',
			}
		},
		onLoad(options) {
			// if (options.shareCode && decodeURIComponent(options.shareCode) != 'undefined') {
			// 	this.shareCode = decodeURIComponent(options.shareCode);
			// }
		},
		computed: {
			//验证码按钮disabled
			isGetCodeButtonDisabled() {
				return this.$u.test.mobile(this.phone) && (this.tips == '获取验证码' || this.tips == '重新获取');
			},
		},
		methods: {
			comeback() {
				uni.navigateBack();
			},
			//获取验证码
			async getCode() {
				if (this.$u.test.mobile(this.phone) && this.$refs.registerCode.canGetCode) {
					await this.$u.get(this.$restUrl.getRegisterCode, {
						phone: this.phone
					});
					//验证码倒计时开始
					this.$refs.registerCode.start();

				}
			},
			//验证码倒计时change时间，改变tips的显示
			codeChange(text) {
				this.tips = text;
			},
			//验证码开始倒计时
			codeCountDownstart() {
				this.$showToast('已发送验证码');
			},
			//验证表单
			verificationInfo() {
				if (!this.$u.test.mobile(this.phone)) {
					return this.$showToast('请输入正确的手机号')
				} else if (this.code.length != 6) {
					return this.$showToast('验证码不正确')
				} else if (!this.$u.test.rangeLength(this.password, [6, 15])) {
					return this.$showToast('密码不能小于6位')
				} else if (this.password != this.confirmPassword) {
					return this.$showToast('密码与确认密码不一致')
				} else if (!this.isAgreeService) {
					return this.$showToast('请同意服务条款')
				}
				this.userRegister();
			},
			//用户注册
			async userRegister() {
				const wechat_code = (await wx.login()).code;
				const {
					data
				} = await this.$u.post(this.$restUrl.userRegister, {
					phone: this.phone,
					code: this.code,
					operation: 3,
					password: this.password,
					confirm_password: this.confirmPassword,
					share_code:this.shareCode,
					wechat_code,
				});
				console.log(data);
				this.handlerLogin(data);
			},
			async handlerLogin(data) {
				try {
					//设置本地已登录用户标识
					this.setCurrentUserLabel(data.customer_id);
					//存储token
					this.setTokeSync(data.token);
					//存储环信token
					this.setHXTokeSync(data.hx_token);
					//更新用户cid
					// const cid = (await uni.getPushClientId())[1].cid;
					// console.log(cid)
					// await this.$u.post(this.$restUrl.updateUserCid, {
					// 	cid
					// });
					//获取用户信息
					const userInfo = await this.getUserInfo();
					//讲用户信息存储在本地做持久化登录
					this.$u.vuex('userInfo', userInfo.data);
					this.$u.route('/pages_login/select_identity/selectIdentity');
				} catch (err) {
					console.log(err)
					//删除本地用户标识
					this.removeCurrentUserLabel();
					//删除token
					this.removeTokenSync();
					//删除环信token
					this.removeHXTokenSync();
					this.$showToast('注册失败')
				}
			},
			getUserInfo() {
				return this.$u.post(this.$restUrl.getUserInfo);
			},
			jumpLogin() {
				this.$u.route('/pages_login/login_entry/loginEntry')
			},
			toagreeandservices(type) {
				if (type == 1) {
					this.$u.route('/pages/agreeandservices/servicesAgreement')
				} else if (type == 2) {
					this.$u.route('/pages/agreeandservices/privacyPolicy')
				}
			},
		}
	}
</script>

<style scoped>
	@import "./register.scss";
</style>
